<template>
    <div class="userContainer">
        <mt-header title="账户信息">
            <router-link to="/myself" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <el-upload
            action="/users/setUsersProfile"
            :show-file-list="false"
            :headers="headers"
            :on-success="onsuccess">
            <div class="profileBox">
                <img :src="profile" class="profileclass" width="50" height="50">
            </div>
        </el-upload>
        <div @click.prevent="setUserName"><mt-cell title="昵称" is-link :value="userName"></mt-cell></div>
        <div @click.prevent="setBirthday"><mt-cell title="生日" is-link :value="birthday"></mt-cell></div>
        <div @click.prevent="setInfor"><mt-cell title="简介" is-link :value="info"></mt-cell></div>
        <router-link to="addressMessage" style="text-decoration:none">
            <div><mt-cell title="收货地址" is-link></mt-cell></div>
        </router-link>
        <div class="tipContainer">账号绑定</div>
        <div @click.prevent="setPhoneName"><mt-cell title="手机" is-link :value="phoneName"><img slot="icon" src="../images/bindphone.png" width="24" height="24"></mt-cell></div>
        <div class="tipContainer">安全设置</div>
        <div @click.prevent="setPassword"><mt-cell title="登录密码" is-link value="修改"></mt-cell></div>
        <mt-button class="btn" type="danger" @click.prevent="quit">退出登录</mt-button>
        <!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->
        <div @touchmove.prevent>
            <mt-datetime-picker
                lockScroll="true"
                ref="datePicker"
                v-model="selectbirthday"
                type="date"
                :start-date="startDate"
                :end-date="endDate"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="dateConfirm()">
            </mt-datetime-picker>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import { MessageBox,DatetimePicker,Actionsheet } from 'mint-ui';
    import moment from "moment";
    import {Toast} from 'mint-ui'
    import { mapMutations } from 'vuex';
    Vue.prototype.$moment = moment;
    Vue.use(DatetimePicker.name, DatetimePicker);
    Vue.use(Actionsheet.name, Actionsheet);
    export default{
        data(){
            return{
                headers:{
                    Authorization:window.sessionStorage.getItem("tokenStr")
                },
                userName:"",
                phoneName:"",
                birthday:"",
                selectbirthday:"",
                startDate:new Date("1901-1-1"),
                endDate:new Date(),
                profile:"",
                info:""
            }
        },
        components:{
        },
        mounted(){
            this.setHistory('userInformation')
            if(window.sessionStorage.getItem("Tag-userInformation")){//如果标记在缓存里，说明全部被加载过
                console.log(window.sessionStorage.getItem("Tag-userInformation"));
                this.userName=window.sessionStorage.getItem('userName');
                this.birthday=window.sessionStorage.getItem('birthday');
                this.profile=window.sessionStorage.getItem('profile');
                this.info=window.sessionStorage.getItem('info');
                this.phoneName=window.sessionStorage.getItem('phoneName');
            }else{
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                this.postRequest('/users/getUsersProperty',null,tokenStr).then(response=>{
                    if(response.code==200){
                        this.userName=response.obj.userName;
                        if(response.obj.birthday==null)
                            this.birthday="";
                        else this.birthday=response.obj.birthday;
                        if(response.obj.info==null)
                            this.info="";
                        else this.info=response.obj.info;
                        if(response.obj.profile==null)
                            this.profile="";
                        else this.profile="/file"+response.obj.profile;
                        this.phoneName=response.obj.phoneName;
                        window.sessionStorage.setItem('userName',this.userName);
                        window.sessionStorage.setItem('birthday',this.birthday);
                        window.sessionStorage.setItem('info',this.info);
                        window.sessionStorage.setItem('profile',this.profile);
                        window.sessionStorage.setItem('phoneName',this.phoneName);
                        window.sessionStorage.setItem('Tag-userInformation',true);
                    }
                });
            }
        },
        methods:{
            ...mapMutations(['setHistory','setFirstLogin']),
            onsuccess(response){
                if(response.code==200){
                    this.profile='/file'+response.obj.url;
                    window.sessionStorage.setItem("profile",this.profile);
                }
            },
            async setUserName(){
                MessageBox.prompt('请输入修改的昵称').then(({value,action}) => {
                    let postData=this.$qs.stringify({
                        userName:value
                    });
                    if(action=="confirm"){
                        let tokenStr=window.sessionStorage.getItem('tokenStr');
                        this.postRequest('/users/setUsersUserName',postData,tokenStr).then(response=>{
                            if(response.code==200){
                                this.userName=value;
                                window.sessionStorage.setItem('userName',this.userName);
                                Toast({message: '昵称修改成功',position: 'bottom',duration: 3000});
                            }else Toast({message: '服务器出现问题',position: 'bottom',duration: 3000});
                        })
                    }
                }).catch(error=>{});
            },
            async setBirthday(){
                if(this.birthday==''||this.birthday==null)
                    this.selectbirthday=new Date();
                else this.selectbirthday=this.birthday;
                this.$refs['datePicker'].open();
            },
            async dateConfirm(){
                    let postData=this.$qs.stringify({
                        birthday:moment(new Date(this.selectbirthday)).format("YYYY-MM-DD")
                    });
                    let tokenStr=window.sessionStorage.getItem('tokenStr');
                    this.postRequest('/users/setUsersBirthday',postData,tokenStr).then(response=>{
                        if(response.code==200){
                            this.birthday=moment(new Date(this.selectbirthday)).format("YYYY-MM-DD");
                            window.sessionStorage.setItem('birthday',this.birthday);
                            Toast({message: '生日修改成功',position: 'bottom',duration: 3000});
                        }else Toast({message: '服务器出现问题',position: 'bottom',duration: 3000});
                    })
            },
            async setInfor(){
                MessageBox.prompt('请输入修改的简介').then(({value,action}) => {
                    let postData=this.$qs.stringify({
                        info:value
                    });
                    if(action=="confirm"){
                        let tokenStr=window.sessionStorage.getItem('tokenStr');
                        this.postRequest('/users/setUsersInfo',postData,tokenStr).then(response=>{
                            if(response.code==200){
                                this.info=value;
                                window.sessionStorage.setItem('info',this.info);
                                Toast({message: '简介修改成功',position: 'bottom',duration: 5000});
                            }else Toast({message: '服务器出现问题',position: 'bottom',duration: 3000});
                        })
                    }
                }).catch(error=>{});
            },
            async setPhoneName(){
                MessageBox.prompt('请输入修改的手机号').then(({value,action}) => {
                    console.log('向后端发送修改后的手机号');
                    console.log(value);
                }).catch(error=>{});
            },
            async setPassword(){
                this.$router.push({path:'setpassword'});
            },
            async quit(){
                MessageBox.confirm('确认退出','提示').then(action => {
                    let postData=this.$qs.stringify({});
                    if(action=="confirm"){
                        let tokenStr=window.sessionStorage.getItem('stoken');
                        this.postRequest('/login/logout',postData,tokenStr).then(response=>{
                                if(response.code==200){
                                    this.setFirstLogin(0);
                                    window.sessionStorage.clear();//清除缓存
                                    this.$router.push({path:'home'});
                                }
                            }
                        )
                    }
                }).catch(error=>{});
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    .userContainer{
        width: 100%;
        .setHeight{
            height: 4rem;
        }
        /deep/ .el-upload{
            @include width-height(100%,4.5rem);
        }
        /deep/ .mint-cell-text{
            color:#000;
        }
        .profileBox{
            @include width-height(100%,4.5rem);
            background-color: #fff;
            .profileclass{
                border-radius: 50%;//圆角
                margin-top: 0.6rem;
            }
        }
        background-color: #f1f1f1;
        .tipContainer{
            padding:  0.4rem 0 0 0.6rem;
            @include width-height(100%,1.6rem);
            @include font-size-color(0.8rem, #666);
        }
        .btn{
            margin-top:2rem;
            @include width-height(100%,2.5rem);
        }
    }
</style>